<template>
  <div class="ubd-detail">
    <div class="content">
      <section class="detail-hd">
        <div class="detail-left">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign_a">
            <el-form-item label="用户账号：">
              <el-input
                v-model="formLabelAlign_a.userCount"
                placeholder="15626337483"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="登录状态：">
              <el-input :v-model="formLabelAlign_a.state === '1' ? '在线':'未上线'" placeholder="在线" :disabled="true" />
            </el-form-item>
            <el-form-item label="需求：">
              <el-input v-model="formLabelAlign_a.demand" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="资源/产品：">
              <el-input v-model="formLabelAlign_a.product" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="服务：">
              <el-input v-model="formLabelAlign_a.serve" placeholder="无" :disabled="true" />
            </el-form-item>
          </el-form>
        </div>
        <div class="dcenter">
          <el-form :label-position="labelPosition" label-width="90px">
            <el-form-item label="用户ID:">
              <el-input
                v-model="formLabelAlign_a.userCode"
                placeholder="无"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="用户名：">
              <el-input v-model="formLabelAlign_a.userName" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="性别：">
              <el-input v-model="formLabelAlign_a.sex" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="生日：">
              <el-input
                v-model="formLabelAlign_a.birthday"
                placeholder="无"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="城市：">
              <el-input
                v-model="formLabelAlign_a.settlement"
                placeholder="无"
                :disabled="true"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="drig">
          <el-form :label-position="labelPosition" label-width="90px">
            <el-form-item label="职业：">
              <el-input v-model="formLabelAlign_a.jobName" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="用户等级：">
              <el-input v-model="formLabelAlign_a.levelName" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="关注行业：">
              <el-input v-model="formLabelAlign_a.tradeCode" placeholder="无" :disabled="true" />
            </el-form-item>
            <el-form-item label="注册时间：">
              <el-input
                v-model="formLabelAlign_a.createTime"
                placeholder="2019-08-08"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="用户来源：">
              <el-input v-model="formLabelAlign_a.userSource" placeholder="App" :disabled="true" />
            </el-form-item>
          </el-form>
        </div>
      </section>
      <section class="detail-bd">
        <header>统计信息</header>
        <div data-list>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            align="center"
            :header-cell-style="{
              'background-color': '#fafafa',
              'color':'#333',
              'height':'56px',
              'line-height':'56px',
              'padding-left':'20px',
              'font-size':'14px',
              'background': 'rgba(242, 242, 242, 1)'
            }"
          >
            <el-table-column prop="id" label="用户排名" width="180" align="center" />
            <el-table-column prop="loginCount" label="登录次数" width="180" align="center" />
            <el-table-column prop="usableCoin" label="可用金币" align="center" />
            <el-table-column prop="focusCount" label="关注数" align="center" />
            <el-table-column prop="befocusedCount" label="被关注数" align="center" />
            <el-table-column prop="publishCount" label="发布信息" align="center" />
            <el-table-column prop="invateCount" label="邀请好友" align="center" />
            <el-table-column prop="createTime" label="最后登录" align="center" />
          </el-table>
        </div>
      </section>
      <section class="detail-bd">
        <header>订单统计</header>
        <div data-list>
          <el-table
            :data="orderData"
            border
            style="width: 100%"
            align="center"
            :header-cell-style="{
              'background-color': '#fafafa',
              'color':'#333',
              'height':'56px',
              'line-height':'56px',
              'padding-left':'20px',
              'font-size':'14px',
              'background': 'rgba(242, 242, 242, 1)'
            }"
          >
            <el-table-column prop="orderCode" label="订单编号" width="180" align="center" />
            <el-table-column prop="createTime" label="提交时间" width="180" align="center" />
            <el-table-column prop="userCode" label="用户账号" align="center" >
              <template slot-scope="scope">
                <div>{{scope.row.phone}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="订单金额" align="center" />
            <el-table-column prop="payType" label="支付方式" align="center" />
            <el-table-column prop="orderState" label="订单状态" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" @click="getOrderDetails(scope.row.orderCode)">查看订单</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <!-- 分页 -->
      <pagination :pagination="pagination1" />
    </div>
  </div>
</template>
<script>
import { getuserDetail, getUserStatGetList, getUserOrder } from "@/api/usermanage";
import { formatDateAndTime, formatDate } from "@/utils/util.js";
import { getOrderDetails } from '@/api/order'
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign_a: {},
      tableData: [],
      orderData: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      pagination1: {}
    }
  },
  created() {
    this.getUser()
    this.Statistics()
    this.Order()
  },
  methods: {
    getUser() {
      getuserDetail({
        userCode: this.$route.query.code
      }).then(res => {
        res.data[0].birthday = formatDate(res.data[0].birthday)
        res.data[0].createTime = formatDateAndTime(res.data[0].createTime)
        this.formLabelAlign_a = res.data[0]
        console.log('user', this.formLabelAlign_a)
      })
    },
    Statistics() {
      getUserStatGetList({
        userCode: this.$route.query.code
      }).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].createTime = formatDateAndTime(res.data[i].createTime);
        }
        this.tableData = res.data;
      })
    },
    // 订单
    Order(pageNum = 1) {
      getUserOrder({
        pageNum,
        pageSize: 10,
        userCode: this.$route.query.code
      }).then(res => {
        res.data.list.forEach(item => {
          item.createTime = formatDateAndTime(item.createTime)
          item.totalPrice = item.totalPrice/100
        })
        this.orderData = res.data.list
        this.pagination1 = res.data
      })
    },
    getOrderDetails(orderCode) {
      this.$router.push({
        name: 'orderDetails',
        query : {
          orderCode
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ubd-detail {
  background: rgba(255, 255, 255, 1);
  // background: #ccc;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .content {
    // min-height: 1400px;
    .detail-hd {
      padding: 29px 0 29px 42px;
      margin-bottom: 27px;
      overflow: hidden;
      input[type="text"] {
        width: 178px;
        height: 40px;
        border-radius: 2px;
        border: 1px solid rgba(203, 203, 203, 1);
      }
      .detail-left {
        float: left;
        label {
          // display: block;
          width: 80px;
          height: 20px;
          text-align: left;
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
        }
      }
      .dcenter {
        float: left;
        margin: 0 186px;
      }
      .drig {
        float: left;
      }
    }
    .detail-bd {
      // width: 1549px;
      height: auto;
      padding: 8px 20px 40px 20px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      header {
        height: 45px;
        margin-bottom: 27px;
        line-height: 40px;
        font-size: 14px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        border-bottom: 1px solid #f2f2f2;
      }
    }
    .dlist-bt {
      width: 1517px;
      margin-top: 30px;
      .pagination-block {
        // // position: absolute;
        // bottom: -117px;
        // right: 349px;
        margin: 0 auto;
      }
    }
  }
}
</style>

